<!DOCTYPE html>
<html lang="en">
    <head>
        <title>保养看板</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="../css/global.css" rel="stylesheet">
        <link rel="stylesheet" href="../css/iconfont/iconfont.css">
        <link rel="stylesheet" href="../css/patrolKanban.css">
        <script src="../js/vue.js"></script>
        <script src="../js/axios.js"></script>
        <script src="../js/echarts.js"></script>
        <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
        <script src="../css/nutui/dist/nutui.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="app_tabDom">
                <div class="app_header">
                    <div class="app_headerLeft" @click="back">
                        <span class="iconfont icon-arrow-left-bold"></span>
                    </div>
                    <div class="app_headerTitle">巡检看板</div>
                </div>
                <div class="app_tabs">
                    <div class="left">近一年<span class="iconfont icon-arrow-down-bold"></span></div>
                    <div class="right">全部区域<span class="iconfont icon-arrow-down-bold"></span></div>
                </div>
            </div>
            <div class="app_mainList1">
                <div class="title">
                    <div class="num">590</div>
                    <div class="txt">任务总量(个)</div>
                </div>
                <div id="main" class="app_mainList1Echarts"></div>
                <nut-row>
                    <nut-col :span="8">
                        <div class="rowNum">534</div>
                        <div class="rowTxt">已完成</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="rowNum">34</div>
                        <div class="rowTxt">待完成</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="rowNum">12</div>
                        <div class="rowTxt">漏检</div>
                    </nut-col>
                </nut-row>
            </div>
            <div class="app_mainList2">
                <div class="app_mainListTitle">保养任务指标</div>
                <nut-row>
                    <nut-col :span="12">
                        <div class="rowNum">79.1%</div>
                        <div class="rowTxt">完成率</div>
                    </nut-col>
                    <nut-col :span="12">
                        <div class="rowNum">20.4%</div>
                        <div class="rowTxt">未完成率</div>
                    </nut-col>
                </nut-row>
            </div>
            <div class="app_mainList2" style="top: -86px!important">
                <div class="app_mainListTitle">保养分析</div>
                <nut-row>
                    <nut-col :span="8">
                        <div class="rowNum">100</div>
                        <div class="rowTxt">保养设备</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="rowNum">30</div>
                        <div class="rowTxt">未保养设备</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="rowNum">6</div>
                        <div class="rowTxt">漏保养设备</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="rowNum">56%</div>
                        <div class="rowTxt">保养覆盖率</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="rowNum">34%</div>
                        <div class="rowTxt">未保养覆盖率</div>
                    </nut-col>
                    <nut-col :span="8">
                        <div class="rowNum">10%</div>
                        <div class="rowTxt">漏保养率</div>
                    </nut-col>
                </nut-row>
            </div>
            <div class="app_mainList3">
                <div class="app_mainListTitle">保养人员统计</div>
                <nut-row class="app_mainList3TableTh">
                    <nut-col :span="8">
                        <div class="flex-content">姓名</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">总数</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">完成</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">待完成</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">漏检</div>
                    </nut-col>
                </nut-row>
                <nut-row class="app_mainList3TableTd" v-for="(item,index) in tableData" :key="index">
                    <nut-col :span="8">
                        <div class="flex-content"><span :class="'box'+item.no">{{item.no}}</span>{{item.name}}</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">{{item.total}}</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">{{item.complete}}</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">{{item.toDo}}</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">{{item.Undetected}}</div>
                    </nut-col>
                </nut-row>
            </div>
        </div>
        <script>
            var vm = new Vue({
            el: '#app',
            data: {
                tableData: [
                    {no: 1,name: '张志',total: '49',complete: '30',toDo: '42',Undetected: '0'},
                    {no: 2,name: '李维',total: '22',complete: '22',toDo: '0',Undetected: '0'},
                    {no: 3,name: '孙志浩',total: '10',complete: '8',toDo: '2',Undetected: '0'},
                    {no: 4,name: '张仲敬',total: '10',complete: '8',toDo: '2',Undetected: '0'},
                    {no: 5,name: '张三',total: '49',complete: '30',toDo: '42',Undetected: '0'},
                ]
            },
            mounted() {
                this.getEchartsDom()
            },
            methods: {
                back() {
                    window.history.go(-1)
                },
                getEchartsDom() {
                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    const chartObserver = new ResizeObserver(() => {
                        myChart.resize()
                    })
                    chartObserver.observe(chartDom)
                    var option;
                    option = {
                        title: {
                            text: '巡检任务概括',
                            top: 12,
                            left: 12,
                            textStyle: {
                                fontSize: 14,
                                fontWeight: 400,
                                color: '#5C5C5C'
                            }
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        // legend: {
                        //     bottom: '0',
                        //     left: 'center'
                        // },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: ['70%', '84%'],
                                color:['#3967FD','#FF9E37','#FD3939'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: false,
                                        fontSize: '40',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: 534, name: '已完成' },
                                    { value: 34, name: '待完成' },
                                    { value: 12, name: '漏检' }
                                ]
                            }
                        ]
                    };
                    option && myChart.setOption(option);
                }
            }
        })
        </script>
    </body>
</html>